<script setup>
import { useI18nStore } from '@/stores';
const i18nStore = useI18nStore();
import img1 from '@/assets/index/c.jpg';
import img2 from '@/assets/index/deng.jpg';
import img3 from '@/assets/index/warning.jpg';
import img4 from '@/assets/index/call.jpg';
import img5 from '@/assets/index/nao.jpg';
import img6 from '@/assets/index/cong.jpg';
const list = ref([]);
const updateList = () => {
  list.value = [
    {
      title: i18nStore.translate('index146'),
      slogan: i18nStore.translate('index147'),
      content: [
        {
          text: i18nStore.translate('index148'),
          describe: i18nStore.translate('index149'),
          button: 'copyright@mega.nz',
          img: img1
        },
        {
          text: i18nStore.translate('index150'),
          describe: i18nStore.translate('index151'),
          button: 'copyright@mega.nz',
          img: img2
        },
        {
          text: i18nStore.translate('index152'),
          describe: i18nStore.translate('index153'),
          button: 'copyright@mega.nz',
          img: img3
        }
      ]
    },
    // {
    //   title: '法律',
    //   content: []
    // },
    {
      title: i18nStore.translate('index154'),
      content: [
        {
          text: i18nStore.translate('index155'),
          describe: i18nStore.translate('index156'),
          button: i18nStore.translate('index157'),
          img: img4
        }
      ]
    },
    // {
    //   title: "隐私、安全和数据保护",
    //   content: [],
    // },
    {
      title: i18nStore.translate('index158'),
      content: [
        {
          text: i18nStore.translate('index159'),
          describe: i18nStore.translate('index160'),
          button: 'copyright@mega.nz',
          img: img5
        },
        {
          text: i18nStore.translate('index161'),
          describe: i18nStore.translate('index162'),
          button: 'copyright@mega.nz',
          img: img6
        }
      ]
    }
    // {
    //   title: "媒体",
    //   content: [],
    // },
  ];
};
onMounted(() => {
  updateList();
});
watch(
  () => i18nStore.translate,
  () => {
    updateList();
  }
);
</script>

<template>
  <div class="contact-page overflow-x-hidden">
    <!-- 头部导航 -->
    <div class="auto pc:max-w-[1200px] mobile:text-4xl mobile:px-10">
      <Nav />
    </div>

    <!-- 标语 -->
    <div
      class="w-full min-h-[250px] bg-[#F5F7FA] text-center mb-[70px] flex flex-col justify-center items-center mobile:h-[200px] mobile:px-10"
    >
      <h1
        class="text-[42px] leading-[100px] mobile:text-2xl font-bold mobile:mb-[20px]"
      >
        {{ i18nStore.translate('index163') }}
      </h1>
      <p class="text-[#666]">
        {{ i18nStore.translate('index164') }}
      </p>
    </div>

    <div class="auto pc:max-w-[1100px] mobile:px-10">
      <ul class="pc:flex pc:justify-between mobile:px-10">
        <li
          class="w-[500px] border p-[40px] rounded-xl mobile:w-full mobile:mb-[20px]"
        >
          <div class="w-[70px] h-[70px]">
            <img src="@/assets/index/qiu.jpg" alt="" />
          </div>
          <h1 class="text-3xl font-bold mt-[30px] mb-[30px] mobile:text-2xl">
            {{ i18nStore.translate('index165') }}
          </h1>
          <p class="text-[#888] text-xl">
            {{ i18nStore.translate('index166') }}
          </p>
          <!-- <div
            class="bg-[#00E1FF] mt-[60px] text-[#fff] pc:w-[180px] leading-[50px] text-center rounded-2xl mobile:max-w-[180px]"
          >
            访问帮助中心
          </div> -->
        </li>
        <li class="w-[500px] border p-[40px] rounded-xl mobile:w-full">
          <div class="w-[70px] h-[70px]">
            <img src="@/assets/index/xin.jpg" alt="" />
          </div>
          <h1 class="text-3xl font-bold mt-[30px] mb-[30px] mobile:text-2xl">
            {{ i18nStore.translate('index165') }}
          </h1>
          <p class="text-[#888] text-xl">
            {{ i18nStore.translate('index166') }}
          </p>
          <div
            class="mt-[60px] bg-[#E5FCFF] text-[#00E1FF] pc:w-[180px] leading-[50px] text-center rounded-2xl mobile:max-w-[180px]"
          >
            123456@OK.com
          </div>
        </li>
      </ul>
    </div>

    <div class="auto pc:max-w-[1100px] mobile:px-10">
      <h1
        class="text-[42px] leading-[100px] mobile:text-[40px] font-bold mobile:mb-[20px] mobile:text-center mobile:mt-[30px]"
      >
        {{ i18nStore.translate('index169') }}
      </h1>
      <Accordion
        expandIcon="pi pi-plus"
        collapseIcon="pi pi-minus"
        :activeIndex="0"
      >
        <AccordionTab
          style="border-bottom: 1px solid #e9ecef"
          v-for="i in list"
        >
          <template #header>
            <span class="flex align-items-center gap-2 w-full">
              <span
                class="font-bold white-space-nowrap text-[32px] mobile:text-[20px]"
                >{{ i.title }}</span
              >
            </span>
          </template>
          <p class="text-[#888888] mb-[40px]">{{ i.slogan }}</p>
          <div class="flex justify-between flex-wrap">
            <ul
              class="flex justify-between w-[500px] mb-[30px]"
              v-for="j in i.content"
            >
              <li class="pc:w-[500px] border p-[40px] rounded-xl">
                <div class="w-[70px] h-[70px]">
                  <img :src="j.img" alt="" />
                </div>
                <h1
                  class="text-3xl font-bold mt-[30px] mb-[30px] mobile:text-2xl"
                >
                  {{ j.text }}
                </h1>
                <p class="text-[#888] text-lg">
                  {{ j.describe }}
                </p>
                <div
                  class="bg-[#E5FCFF] text-[#00E1FF] mt-[60px] w-[180px] leading-[50px] text-center rounded-2xl"
                >
                  {{ j.button }}
                </div>
              </li>
            </ul>
          </div>
        </AccordionTab>
      </Accordion>
    </div>

    <!-- 位置 -->
    <div class="auto pc:max-w-[1100px] mobile:px-10">
      <h1
        class="text-[42px] leading-[100px] mobile:text-[40px] font-bold mobile:mb-[20px]"
      >
        {{ i18nStore.translate('index168') }}
      </h1>
      <div class="flex mb-[80px]">
        <div class="left w-[500px] mobile:hidden"></div>
        <div class="right w-[500px]">
          <ul class="flex flex-wrap justify-between">
            <li v-for="i in 2" class="w-[220px] mb-[40px]">
              <div class="w-[60px] h-[60px]">
                <img src="@/assets/index/zhen.jpg" alt="" />
              </div>
              <h1 class="text-2xl font-bold mt-[30px] mb-[10px]">
                新西兰(总部)
              </h1>
              <p class="text-lg text-[#666]">Mega LimitedLevel</p>
              <p class="text-lg text-[#666]">Level 21,Huawei Centre</p>
              <p class="text-lg text-[#666]">120 Albert St</p>
              <p class="text-lg text-[#666]">Auckland</p>
              <p class="text-lg text-[#666]">New Zealand</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- <div class="wrapper-content page-wrapper small">
      <div class="page-title left headline">
        <h1 class="title">联系我们</h1>
        <h2 class="description">你有任何问题吗？请与我们联系。</h2>
      </div>
      <form class="form block-form">
        <div class="block-wrapper">
          <label>电子邮件:</label>
          <div>
            <input
              placeholder="输入您的电子邮件"
              type="email"
              class="input-dark input-color focus-border-theme"
            />
          </div>
        </div>
        <div class="block-wrapper">
          <label>消息:</label>
          <div>
            <textarea
              placeholder="在这里输入你的消息..."
              rows="6"
              class="input-color focus-border-theme input-dark"
            ></textarea>
          </div>
        </div>

        <div>
          <button
            class="group mx-auto inline-block flex items-center whitespace-nowrap rounded-lg border-2 border-black px-7 py-2.5 dark:border-gray-300 submit-button"
          >
            <span class="pr-1 text-lg font-extrabold"> 发送信息 </span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20px"
              height="20px"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="vue-feather text-theme -mr-1 feather feather-chevron-right"
            >
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </button>
        </div>
      </form>
    </div> -->
    <!-- 底部栏 -->
    <div class="foot auto pc:max-w-[1200px] mobile:px-10">
      <Foot />
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
